<template>
  <div>
    <p class="title">{{ $route.query.name }}</p>
    <ul class="letterBox">
      <router-link
        tag="li"
        :to="{
          name: 'singer',
          query: {
            type: $route.query.type,
            area: $route.query.area,
            name: $route.query.name,
          },
        }"
        :class="!$route.query.initial && 'isHot'"
        >热门</router-link
      >
      <router-link
        v-for="item in letter"
        tag="li"
        :to="{
          name: 'singer',
          query: {
            type: $route.query.type,
            area: $route.query.area,
            name: $route.query.name,
            initial: item,
          },
        }"
        :key="item"
        >{{ item }}</router-link
      >
    </ul>
    <ul class="singerBox">
      <router-link
        tag="li"
        :to="{ name: 'singerdetail', query: { id: item.id, name: item.name } }"
        class="singerItem"
        v-for="item in list.slice(0, 10)"
        :key="item.id"
      >
        <img class="singerPicUrl" :src="item.img1v1Url" alt="" />
        <p class="singerName">
          <span>{{ item.name }}</span> <i></i>
        </p>
      </router-link>
    </ul>
    <div class="bottomBorder"></div>
    <ul class="singerBox">
      <router-link
        tag="li"
        :to="{ name: 'singerdetail', query: { id: item.id, name: item.name } }"
        v-for="item in list.slice(10)"
        :key="item.id"
        class="singerItemTwo"
      >
        <p class="singerName">
          <span>{{ item.name }}</span> <i></i>
        </p>
      </router-link>
    </ul>
  </div>
</template>

<script>
import { singerClassify } from "@/api";
export default {
  data() {
    return {
      list: [],
      letter: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  mounted() {},
  methods: {
    getData() {
      singerClassify({
        limit: 100,
        type: this.$route.query.type,
        area: this.$route.query.area,
        initial: this.$route.query.initial,
      }).then((res) => {
        this.list = res.artists;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 24px;
  font-weight: normal;
  height: 40px;
  border-bottom: 2px solid #c20c0c;
}
.letterBox {
  display: flex;
  margin-top: 20px;
  li {
    font-size: 14px;
    line-height: 24px;
    padding: 0 5px;
    text-align: center;
    &.router-link-exact-active {
      background: #c20c0c;
      border-radius: 2px;
      color: #fff;
    }
    &.isHot {
      background: #c20c0c;
      border-radius: 2px;
      color: #fff;
    }
  }
}
.singerBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .singerItem {
    margin-top: 20px;
    .singerPicUrl {
      width: 130px;
      height: 130px;
      border: 1px solid #ccc;
    }
    .singerName {
      margin-top: 8px;
      span {
        max-width: 105px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      i {
        background-image: url("./../../assets/imges/btnIconTwo.png");
        width: 17px;
        height: 18px;
        background-position: 0 -740px;
        vertical-align: middle;
        float: right;
      }
    }
  }
  .bottomBorder {
    border-bottom: 1px dotted #999;
    margin: 30px 0 10px 0;
  }
  .singerItemTwo {
    width: 130px;
    margin-top: 5px;
    .singerName {
      margin-top: 8px;
      span {
        max-width: 105px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      i {
        display: inline-block;
        background-image: url("./../../assets/imges/btnIconTwo.png");
        width: 17px;
        height: 18px;
        background-position: 0 -740px;
        vertical-align: middle;
      }
    }
  }
}
</style>